@import "./variables.scss";
@import "./utils.scss";
@import "./mixin.scss";
@import "./transition.scss";
@import "./element-ui.scss";
@import "./sidebar.scss";
@import "./btn.scss";

@import "./proview.scss";


body {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #111111;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
  font-size: 14px;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  overflow: none !important;
  box-sizing: border-box;
}

ul,
li {
  list-style: none;
}

// #app {
//   height: 100%;
// }

*,
*:before,
*:after {
  box-sizing: inherit;
}

.no-padding {
  padding: 0 !important;
}

.padding-content {
  padding: vh(4) 0;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

aside {
  background: #eef1f6;
  padding: vh(8) vw(24);
  margin-bottom: vh(20);
  border-radius: 2px;
  display: block;
  line-height: vh(32);
  font-size: vh(16);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  a {
    color: #337ab7;
    cursor: pointer;

    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

//===========================================================================
.full-screen {
  width: 100%;
  height: 100%;
}

.full-width {
  width: 100%;
}
.full_height {
  width: 100%;
}

.flex {
  display: flex;
}
.fx1 {
  flex: 1;
}
.fx2 {
  flex: 2;
}
.fx3 {
  flex: 3;
}
.fx4 {
  flex: 4;
}
.fx5 {
  flex: 5;
}
.fx6 {
  flex: 6;
}
.fx7 {
  flex: 7;
}
.fx8 {
  flex: 8;
}
.fx9 {
  flex: 9;
}
.fx13 {
  flex: 13;
}
.column {
  flex-direction: column;
}
.fx-row {
  flex-direction: row;
}
.jstart {
  justify-content: flex-start;
}
.jend {
  justify-content: flex-end;
}
.jbetween {
  justify-content: space-between;
}
.jcenter {
  justify-content: center;
}
.jaround {
  justify-content: space-around;
}
.align-s {
  align-items: flex-start;
}
.align-c {
  align-items: center;
}
.align-e {
  align-items: flex-end;
}
.wap {
  flex-wrap: wrap;
}
.nowap {
  flex-wrap: nowrap;
}
.hidden {
  overflow: hidden;
}
.of-xhya {
  overflow-x: hidden;
  overflow-y: auto;
}
.of-xayh {
  overflow-x: auto;
  overflow-y: hidden;
}

.flexrb {
  display: flex;
  justify-content: space-between;
}
.flexrsc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flexcbh {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.flexcsc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.flexcb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flexce {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.flexrbc {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flexrc {
  display: flex;
  justify-content: center;
}
.flexrcc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flexcc {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexccc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flexcac {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.flexcbc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.flexcsh {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.flexrbh {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.flexrch {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.flexrce {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.flexcah {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  overflow: hidden;
}
.flexrec {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.flexrah {
  display: flex;
  justify-content: space-around;
  overflow: hidden;
}

.grid-gap20 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: vh(10) vw(20);
}
.grid-row2 {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-gap: vh(20) 0;
}
.grid-row2h {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-gap: vh(20) 0;
  overflow: hidden;
}
.grid-row3 {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: vh(20) 0;
}
.grid-row3h {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: vh(20) 0;
  overflow: hidden;
}
.grid-row4 {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-gap: vh(20) 0;
}
.grid-row4h {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-gap: vh(20) 0;
  overflow: hidden;
}
.grid-col2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0 vw(20);
}
.grid-col2h {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0 vw(20);
  overflow: hidden;
}
.grid-col3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0 vw(20);
}
.grid-col3h {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0 vw(20);
  overflow: hidden;
}
.grid-col3-121 {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-gap: 0 vw(20);
}
.grid-col4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0 vw(20);
}
.grid-col4h {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0 vw(20);
  overflow: hidden;
}


.w-text {
  color: $whiteText;
}
.m-t20 {
  margin-top: vh(20);
}
.m-t30 {
  margin-top: vh(30);
}
.m-r5 {
  margin-right: vw(5);
}
.m-r10 {
  margin-right: vw(10);
}
.m-r20 {
  margin-right: vw(20);
}
.m-r30 {
  margin-right: vw(30);
}
.m-b5 {
  margin-bottom: vh(5);
}
.m-b7 {
  margin-bottom: vh(7);
}
.m-b10 {
  margin-bottom: vh(10);
}
.m-b14 {
  margin-bottom: vh(14);
}
.m-b15 {
  margin-bottom: vh(15);
}
.m-b20 {
  margin-bottom: vh(20);
}
.m-b25 {
  margin-bottom: vh(25);
}
.m-b40 {
  margin-bottom: vh(40);
}
.m-b30 {
  margin-bottom: vh(30);
}
.m-b46 {
  margin-bottom: vh(46);
}
.m-b50 {
  margin-bottom: vh(50);
}

.m-l5 {
  margin-left: vw(5);
}
.m-l10 {
  margin-left: vw(10);
}
.m-l20 {
  margin-left: vw(20);
}
.m-l30 {
  margin-left: vw(30);
}

.p-row10 {
  padding: 0 vw(10);
}
.p-row15 {
  padding: 0 vw(15);
}
.p-row30 {
  padding: 0 vw(30);
}
.p-row380 {
  padding: 0 vw(380);
}
.p-row20 {
  padding: 0 vw(20);
}
.p-row40 {
  padding: 0 vw(40);
}
.p-col5 {
  padding: vh(5) 0;
}
.p-3 {
  padding: vh(3) vw(3);
}
.p-5 {
  padding: vh(5) vw(5);
}
.p-10 {
  padding: vh(10) vw(10);
}
.p-14 {
  padding: vh(14) vw(14);
}
.p-16 {
  padding: vh(16) vw(16);
}
.p-30 {
  padding: vh(30) vw(30);
}
.p-20 {
  padding: vh(20) vw(20);
}
.p-50 {
  padding: vh(50) vw(50);
}
.p-60 {
  padding: vh(60) vw(60);
}
.p-70 {
  padding: vh(70) vw(70);
}

.pr20 {
  padding-right: vw(20);
}

.position-ab {
  position: absolute;
}
.position-re {
  position: relative;
}
.inline-block {
  display: inline-block;
}
.height50 {
  height: 50%;
}
.pointer {
  cursor: pointer;
}
.cursor_move {
  cursor: move;
}

.f99 {
  background-color: #f99;
}
.aff {
  background-color: #aff;
}
.fcf {
  background-color: #fc3;
}

.fontsize12 {
  font-size: vh(12);
}
.fontsize13 {
  font-size: vh(13);
}
.fontsize14 {
  font-size: vh(14);
}
.fontsize15 {
  font-size: vh(15);
}
.fontsize16 {
  font-size: vh(16);
}
.fontsize17 {
  font-size: vh(17);
}
.fontsize18 {
  font-size: vh(18);
}
.fontsize19 {
  font-size: vh(19);
}
.fontsize20 {
  font-size: vh(20);
}
.fontsize22 {
  font-size: vh(22);
}
.fontsize26 {
  font-size: vh(26);
}
.fontsize27 {
  font-size: vh(27);
}
.fontsize28 {
  font-size: vh(28);
}
.fontsize29 {
  font-size: vh(29);
}
.fontsize30 {
  font-size: vh(30);
}
.fontsize31 {
  font-size: vh(31);
}
.fontsize32 {
  font-size: vh(32);
}
.fontsize33 {
  font-size: vh(33);
}
.fontsize36 {
  font-size: vh(36);
}
.fontsize48 {
  font-size: vh(48);
}
.fontsize52 {
  font-size: vh(52);
}
.fontsize60 {
  font-size: vh(60);
}
.fontsize63 {
  font-size: vh(63);
}
.text-c {
  text-align: center;
}
.fw700 {
  font-weight: 700;
}
.c-01F6E3 {
  color: #01f6e3;
}
.font-lcd2 {
  font-family: LCD2U;
  font-weight: normal;
}
.font-bold {
  font-weight: bold;
}

.forbid {
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}

.scroll_bar::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: vw(3); /*高宽分别对应横竖滚动条的尺寸*/
  height: vh(8);
}
.scroll_bar::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  background: #169fc4;
}
.scroll_bar::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: rgba(22, 159, 196, 0.2);
}


.scroll_none::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 0; /*高宽分别对应横竖滚动条的尺寸*/
  height: 0;
}
.scroll_none::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  background: rgba(0,0,0,0);
}
.scroll_none::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: rgba(0,0,0,0);
}



// 暂无数据
.no_data {
  color: #fff;
  font-size: 20px;
  margin: 60px auto;
  text-align: center;
}

// 字体
.font_din{
  font-family: 'D-DIN';
}
